#preview {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: var(--noora-spacing-6);
  margin: var(--noora-spacing-7) var(--noora-spacing-0);

  &:not(.layout__main &) {
    margin: var(--noora-spacing-7);
  }

  & > [data-part="action-buttons"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--noora-spacing-4);
  }

  & > #download-tuist-app-alert {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 422px;
  }

  & > [data-part="header"] {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: var(--noora-spacing-4);
    padding-top: var(--noora-spacing-7);

    & > [data-part="icon-with-dots"] {
      position: relative;
      height: 56px;

      & > [data-part="icon"] {
        position: relative;
        z-index: 103;
        box-shadow:
          0px 20px 6px 0px oklch(0% 0 0 / 0),
          0px 13px 5px 0px oklch(0% 0 0 / 0.01),
          0px 7px 4px 0px oklch(0% 0 0 / 0.05),
          0px 3px 3px 0px oklch(0% 0 0 / 0.09),
          0px 1px 2px 0px oklch(0% 0 0 / 0.1);
        --size: 56px;
        border-radius: var(--tuist-app-icon-radius);
        width: var(--size);
        height: var(--size);
      }

      & [data-part="dots"] {
        position: absolute;
        top: 0;
        right: -136px;
        bottom: 0;
        left: -136px;
        & svg {
          display: none;
        }

        html[data-theme="light"] & svg {
          &[data-theme="light"] {
            display: block;
          }
          &[data-theme="dark"] {
            display: none;
          }
        }
        html[data-theme="dark"] & svg {
          &[data-theme="light"] {
            display: none;
          }
          &[data-theme="dark"] {
            display: block;
          }
        }
      }
    }

    & > [data-part="title"] {
      margin: var(--noora-spacing-0);
      color: var(--noora-surface-label-primary);
      font: var(--noora-font-weight-medium) var(--noora-font-heading-medium);
    }

    & > [data-part="version"] {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--noora-spacing-2);

      & > [data-part="icon"] {
        width: 18px;
        height: 18px;
        color: var(--noora-surface-label-secondary);

        & > svg {
          width: 100%;
          height: 100%;
        }
      }

      & > [data-part="label"] {
        color: var(--noora-surface-label-secondary);
        font: var(--noora-font-weight-regular) var(--noora-font-body-medium);
      }
    }
  }

  & > [data-part="actions"] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--noora-spacing-4);
    padding-bottom: var(--noora-spacing-7);
  }

  & > [data-part="details-card"] {
    & > [data-part="details-card-section"] {
      & > [data-part="metadata-grid"] {
        display: flex;
        flex-direction: column;
        gap: var(--noora-spacing-9);

        & > [data-part="metadata-row"] {
          display: flex;
          flex-direction: row;
          gap: var(--noora-spacing-7);

          & > [data-part="metadata"] {
            display: flex;
            flex: 1;
            flex-direction: column;
            align-items: flex-start;
            gap: var(--noora-spacing-4);

            & > [data-part="title"] {
              color: var(--noora-surface-label-secondary);
              font: var(--noora-font-weight-medium) var(--noora-font-body-medium);
            }

            & > [data-part="label"] {
              display: flex;
              flex-direction: row;
              align-items: center;
              gap: var(--noora-spacing-2);
              color: var(--noora-surface-label-primary);
              font: var(--noora-font-weight-regular) var(--noora-font-body-medium);

              & > svg {
                width: var(--noora-icon-size-medium);
                height: var(--noora-icon-size-medium);
                color: var(--noora-surface-label-secondary);
              }
            }
          }
        }
      }
    }
  }
  & > [data-part="install-app-card"] {
    & > [data-part="install-app-card-section"] {
      flex: display;
      flex-direction: column;
      gap: var(--noora-spacing-7);

      & > [data-part="scan-qr-code"] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--noora-spacing-4);

        & > [data-part="title"] {
          margin: var(--noora-spacing-0);
          color: var(--noora-surface-label-primary);
          font: var(--noora-font-weight-medium) var(--noora-font-body-medium);
        }

        & > [data-part="subtitle"] {
          color: var(--noora-surface-label-secondary);
          font: var(--noora-font-weight-regular) var(--noora-font-body-small);
        }

        & > [data-part="qr-code"] {
          box-shadow: var(--noora-border-light-default);
          border-radius: var(--noora-radius-large);
          width: 120px;
          height: 120px;
        }
      }

      & > .tuist-terminal {
        align-self: center;
      }

      & > [data-part="device-not-available"] {
        display: flex;
        flex-direction: column;
        align-items: center;

        html[data-theme="light"] & img {
          &[data-theme="dark"] {
            display: none;
          }
        }
        html[data-theme="dark"] & img {
          &[data-theme="light"] {
            display: none;
          }
        }

        & > img {
          margin-bottom: calc(-1 * var(--noora-spacing-7));
        }

        & > [data-part="explanation"] {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: var(--noora-spacing-4);

          & > [data-part="title"] {
            margin: var(--noora-spacing-0);
            color: var(--noora-surface-label-secondary);
            font: var(--noora-font-weight-medium) var(--noora-font-body-medium);
            text-align: center;
          }

          & > [data-part="subtitle"] {
            color: var(--noora-surface-label-tertiary);
            font: var(--noora-font-weight-regular) var(--noora-font-body-small);
            text-align: center;
          }
        }
      }
    }
  }
}
